import { Flex, Popover } from 'antd';
import { Icon } from '@amcax/base';
import i18n from 'i18next';
import styles from './styles.module.scss';
import CaretRightOutlined from '@ant-design/icons/lib/icons/CaretRightOutlined';
import { ToolbarButtonType } from './type';

interface IProps {
  icon?: string;
  active?: boolean;
  disabled?: boolean;
  label?: string;
  hasRightIcon?: boolean;
  onClick?: (value: 'left' | 'right') => void;
  tips?: {
    title: string;
    description: string;
  };
  buttonType?: ToolbarButtonType;
  popoverOpen?: boolean;
}
export default function ButtonCommon({
  icon,
  active,
  disabled,
  label,
  hasRightIcon = false,
  onClick,
  tips,
  buttonType,
  popoverOpen,
}: IProps) {
  const isBtnClick = buttonType === ToolbarButtonType.btnClick;
  const hasRight = hasRightIcon && !isBtnClick;
  const tempActive = popoverOpen && isBtnClick;
  return (
    <div
      style={{ height: 'max-content' }}
      className={`${!disabled && styles._button_content} mx-[1px] relative p-[1px] max-w-[46px] min-h-[32px]`}>
      {icon ? (
        <Flex
          className={`${active || tempActive ? styles._button_active : styles._button}`}>
          <Popover
            rootClassName={'_self_popover_content'}
            placement='topLeft'
            destroyOnHidden
            mouseEnterDelay={tips ? 1 : 1000}
            arrow={false}
            getPopupContainer={() =>
              document.querySelector('#app-nextshape_root')
            }
            content={
              <div className={styles._tips_content}>
                <div className={styles._tips_title}>{tips?.title}</div>
                <div>{tips?.description}</div>
              </div>
            }>
            <>
              <Icon
                onClick={() => {
                  !disabled && onClick?.('left');
                  if (isBtnClick && hasRightIcon) {
                    onClick?.('right');
                  }
                }}
                className={hasRight && styles._button_left_icon}
                name={icon}
                style={{
                  cursor: !disabled ? 'pointer' : 'default',
                  fontSize: '22px',
                  opacity: disabled ? 0.3 : 1,
                  padding: '4px',
                }}
              />
              {isBtnClick && hasRightIcon && (
                <CaretRightOutlined
                  className={styles._self_drop_btn_icon}
                  rotate={45}
                />
              )}
            </>
          </Popover>
          {hasRight && (
            <div
              onClick={() => !disabled && onClick?.('right')}
              className={`w-[14px] h-[30] flex justify-center align-middle ${styles._button_right_icon}`}>
              <Icon
                name={`commands/common/down-arrow`}
                style={{
                  fontSize: '8px',
                  opacity: disabled ? 0.3 : 1,
                }}
              />
            </div>
          )}
        </Flex>
      ) : (
        i18n.t(label)
      )}
    </div>
  );
}
